<template>
	<view class="jf-forum" @click="handle()" v-if="props.size === 'small'">
		<view class="jf-forum__img" :style="{'height': data.item.height + 'rpx'}" v-if="data.item.cover_image">
			<image :src="data.item.cover_image" class="jf-forum__img-url" mode="aspectFill"></image>
		</view>

		<view class="jf-forum__content">
			<view class="jf-forum__content-text">{{data.translateTitle}}</view>
			<!-- YouDao.translate(data.item,'title') -->
			<image src="@/static/images/index/icon012.png" class="jf-forum__content-btn" @click.stop="translateTitle()">
			</image>
		</view>
		<view class="jf-forum__total" v-if="props.type === '0'">
			<view class="jf-forum__author" v-if="data.item.publisher">
				<image :src="data.item.publisher.avatar || headerIcon" mode="aspectFill"></image>
				<view>{{data.item.publisher.nickname}}</view>
			</view>
			<view class="jf-forum__btns">
				<view class="jf-forum__btn" @click.stop="star()">
					<image :src="store.getStar(item.id) === 1 ? icon002 : icon001" class="jf-forum__btn-big"></image>
					<text>{{data.item.star}}</text>
				</view>
			</view>
		</view>
		<view class="jf-forum__total" v-if="props.type === '1'">
			<view class="jf-forum__btns" style="width:100%">
				<view class="jf-forum__btn">
					<image src="@/static/images/index/icon003.png"></image>
					<view>{{data.item.comment_num}}</view>
				</view>
				<view class="jf-forum__btn">
					<image src="@/static/images/index/icon006.png"></image>
					<view>{{data.item.star}}</view>
				</view>
				<view class="jf-forum__btn">
					<image src="@/static/images/index/icon009.png"></image>
					<view>{{data.item.share_num}}</view>
				</view>
			</view>
		</view>
	</view>

	<view class="jf-forum-large" @click="handle()" v-if="props.size === 'large'">
		<view class="jf-forum-large__top" v-if="data.item.publisher">
			<image :src="data.item.publisher.avatar || headerIcon" mode="aspectFill" class="jf-forum-large__header">
			</image>
			<view class="jf-forum-large__name">{{data.item.publisher.nickname}}</view>
			<view class="jf-forum-large__level">LV{{data.item.publisher.level}}</view>
			<view class="jf-forum-large__time">{{data.item.add_time}}</view>
		</view>
		<view class="jf-forum-large__title">
			<view>{{data.translateTitle}}</view>
			<image src="@/static/images/index/icon012.png" @click.stop="translateTitle()"></image>
		</view>
		<view class="jf-forum-large__image" v-if="data.item.cover_image">
			<image :src="data.item.cover_image" mode="widthFix" class="jf-forum-large__image-url"></image>
		</view>
		<!-- <view class="jf-forum-large__content">
			<view>{{data.translateContent}}</view>
			<image src="@/static/images/index/icon012.png"></image>
		</view> -->
		<view class="jf-forum-large__footer">
			<view class="jf-forum-large__footer-ip">IP：{{data.item.addr}}</view>
			<view class="jf-forum-large__statistics">
				<view class="jf-forum-large__btn">
					<image src="@/static/images/index/icon003.png" style="margin-top: -2rpx;"></image>
					<view>{{data.item.comment_num}}</view>
				</view>
				<view class="jf-forum-large__btn">
					<image src="@/static/images/index/icon006.png"></image>
					<view>{{data.item.star}}</view>
				</view>
				<view class="jf-forum-large__btn">
					<image src="@/static/images/index/icon009.png"></image>
					<view>{{data.item.share_num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, getCurrentInstance } from 'vue';
	import { translate } from "@/api/common"
	import headerIcon from "@/static/images/common/header_icon.png"
	import icon001 from "@/static/images/index/icon006.png"
	import icon002 from "@/static/images/index/icon005.png"
	import { starArticle } from "@/api/article"
	import DateTimeUtils from "@/static/utils/DateTimeUtils"
	import { useStore } from "@/store/main"
	import YouDao from "@/static/utils/YouDao"

	interface Item {
		id ?: number
		add_time ?: any
		image_input ?: string
		addr ?: string
		width ?: number
		height ?: number
		title ?: string
		content ?: string
		is_star ?: number
		comment_num ?: number
		star ?: number
		visit ?: number
		share_num ?: number
		type ?: number
		publisher ?: {
			avatar ?: string
			nickname ?: string
			uid ?: number
			level ?: number
		}
		cover_image : string
	}

	const store = useStore()
	const { proxy } = getCurrentInstance()
	const props = withDefaults(defineProps<{
		type ?: string
		size ?: 'large' | 'small'
		item : any
	}>(), {
		type: "0",
		size: 'small',
		item: {}
	})
	const data = reactive<{
		item : Item
		from : string
		translateTitle : string
		translateTitleOld : string
		translateContent : string
		isTranslate : boolean
		uploadingStar ?: boolean
	}>({
		item: {},
		from: "",
		translateTitle: "",
		translateTitleOld: "",
		translateContent: "",
		isTranslate: false,
		uploadingStar: false
	})

	const handle = () : void => {
		if (data.item.type === 1) {
			uni.navigateTo({
				url: '/pages/index/info/text/text?id=' + data.item.id
			})
		} else {
			uni.navigateTo({
				url: '/pages/index/info/video/video?id=' + data.item.id
			})
		}
	}
	const translateTitle = () : void => {
		data.isTranslate = true;
		if (data.translateTitle !== data.translateTitleOld || uni.getLocale() === data.from) {
			data.translateTitle = data.translateTitleOld;
		} else {
			translate({
				from: data.from,
				to: uni.getLocale(),
				content: data.translateTitle
			}).then((res : any) : void => {
				data.translateTitle = res.data.Translated;
			}).catch(() => {
				console.log("翻译失败！")
			}).finally(() => {
				console.log("翻译执行了！")
			})
		}



		// setTimeout(() => {
		// }, 50)
	}
	const star = () : void => {
		if (!data.uploadingStar) {
			data.uploadingStar = true
			starArticle({
				id: data.item.id,
				type: 1,
				status: data.item.is_star === 1 ? 0 : 1
			}).then(() : any => {
				uni.showToast({
					title: proxy.$t(data.item.is_star === 1 ? 'index.info.unStarSuccess' : 'index.info.starSuccess'),
					icon: "none"
				})
				data.item.is_star = data.item.is_star === 0 ? 1 : 0
				store.setStar(data.item.id, data.item.is_star)
			}).catch(() : void => {
				uni.showToast({
					title: proxy.$t(data.item.is_star === 1 ? 'index.info.unStarFail' : 'index.info.starFail'),
					icon: "none"
				})
			}).finally(() => {
				data.uploadingStar = false
			})
		}
	}

	onMounted(() => {
		data.item = props.item
		data.translateTitle = data.item.title
		data.translateTitleOld = data.item.title
		data.translateContent = data.item.content
		data.from = data.item.from
		store.setStar(props.item.id, props.item.is_star)
	})
</script>

<style lang="scss">
	.jf-forum {
		width: 100%;
		background: #ffffff;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 12rpx 12rpx 24rpx rgba(0, 0, 0, 0.1);
		margin-top: 18rpx;
		animation: show .3s;

		.jf-forum__img {
			position: relative;
			width: 100%;

			.jf-forum__img-url {
				width: 100%;
				height: 100%;
			}
		}

		.jf-forum__content {
			display: flex;
			flex-direction: row;
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;

			// height: 128rpx;
			.jf-forum__content-text {
				flex-grow: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
				font-weight: bold;
				color: #1F2937;
				//line-height: 40rpx;
				//height: 80rpx;
			}

			.jf-forum__content-btn {
				width: 28rpx;
				height: 28rpx;
				margin: 6rpx 0 0 4rpx;
				flex-shrink: 0;
			}
		}

		.jf-forum__total {
			width: calc(100% - 48rpx);
			height: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 24rpx 24rpx 24rpx;

			.jf-forum__author {
				flex-grow: 1;
				height: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 10rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				view {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 24rpx;
					color: #1F2937;
					font-weight: 400;
					line-height: 40rpx;
				}
			}

			.jf-forum__btns {
				flex-shrink: 0;
				height: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.jf-forum__btn {
					display: flex;
					flex-direction: row;
					align-items: center;

					// height: 40rpx;
					// margin-right: 14rpx;
					image {
						width: 28rpx;
						height: 28rpx;
						display: block;
						margin-left: 6rpx;

						&.jf-forum__btn-big {
							width: 40rpx;
							height: 40rpx;
						}
					}

					view {
						font-size: 24rpx;
						color: #A2A9B7;
						font-weight: 500;
						line-height: 24rpx;
						font-family: Avenir;
					}

					text {
						font-size: 24rpx;
						color: #A2A9B7;
						margin-left: 4rpx;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.jf-forum-large {
		width: 100%;
		margin-top: 32rpx;
		border-radius: 16rpx;
		background: #ffffff;
		box-shadow: 12rpx 12rpx 24rpx rgba(0, 0, 0, 0.1);
		padding: 24rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		animation: show .3s;

		.jf-forum-large__top {
			width: 100%;
			@include layout();

			.jf-forum-large__header {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				flex-shrink: 0;
			}

			.jf-forum-large__name {
				@include textOverflow();
				margin-left: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				font-size: 32rpx;
			}

			.jf-forum-large__level {
				line-height: 28rpx;
				border: 2rpx solid #326AFF;
				font-family: Avenir;
				font-weight: 500;
				color: #326AFF;
				font-size: 18rpx;
				padding: 0 12rpx;
				border-radius: 14rpx;
				margin-left: 12rpx;
				flex-shrink: 0;
			}

			.jf-forum-large__time {
				margin-left: 16rpx;
				font-weight: 400;
				color: #B2B9C6;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}

		.jf-forum-large__title {
			@include layout(row, flex-start);
			margin-top: 30rpx;

			view {
				font-weight: 500;
				line-height: 42rpx;
				font-size: 30rpx;
				@include textOverflow(1);
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
				margin-top: 6rpx;
				flex-shrink: 0;
			}
		}

		.jf-forum-large__image {
			position: relative;
			width: 100%;
			// height: 284rpx;
			border-radius: 16rpx;
			margin-top: 24rpx;

			.jf-forum-large__image-url {
				// position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 16rpx
			}
		}

		.jf-forum-large__content {
			@include layout(row, flex-start);
			margin-top: 16rpx;

			view {
				font-weight: 400;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #535A69;
				@include textOverflow(2);
				max-height: 80rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
				margin-top: 6rpx;
				flex-shrink: 0;
			}
		}

		.jf-forum-large__footer {
			@include layout(row, center, space-between);
			height: 90rpx;
			margin-top: 24rpx;

			.jf-forum-large__footer-ip {
				font-weight: 400;
				color: #B2B9C6;
				line-height: 32px;
				font-size: 24rpx;
			}

			.jf-forum-large__statistics {
				@include layout();
				height: 40rpx;

				.jf-forum-large__btn {
					@include layout();
					height: 40rpx;
					font-family: Avenir;
					font-weight: 500;
					color: #A2A9B7;
					line-height: 24rpx;
					font-size: 24rpx;
					margin-left: 40rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	@keyframes show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>